@use 'sass:map';
// 导入主题文件
@use "../../themes/light";
@use "../../themes/dark";


// 定义 CSS 自定义属性
:root {
  @each $key, $value in light.$theme {
    --#{$key}: #{$value};
  }
}

// 暗色主题
[data-theme="dark"] {
  @each $key, $value in dark.$theme {
    --#{$key}: #{$value};
  }
}

// 获取 CSS 自定义属性的函数
@function get-css-var($key) {
  @return var(--#{$key});
}

// Variables
$scale: 1;
$border-radius: 5px;
$z-index-base: 997;
$close-btn-image: url('');
$refresh-btn-image: url('');
$info-btn-image: url('');

// 使用 CSS 自定义属性
$primary-color: get-css-var(primary);
$shadow-color: get-css-var(shadow);
$error-color: get-css-var(error);
$success-color: get-css-var(success);
$track-color: get-css-var(track);
$btn-color: get-css-var(btn);
$word-click-color: get-css-var(word-click);
$move-track-mask-border-color: get-css-var(move-track-mask-border);
$move-track-mask-bg-color: get-css-var(move-track-mask-bg);

$kite-captcha-parent-width: 318;
$kite-captcha-parent-height: 318;

/** global css start **/
#kite-captcha-parent {
  --scale: $scale;
  --z-index: $z-index-base;
  box-shadow: 0 0 calc(var(--scale) * 11px) 0 $shadow-color;
  width: calc(var(--scale) * #{$kite-captcha-parent-width}px);
  height: calc(var(--scale) * #{$kite-captcha-parent-height}px);
  overflow: hidden;
  position: relative;
  z-index: var(--z-index);
  box-sizing: border-box;
  border-radius: $border-radius;
  padding: calc(var(--scale) * 8px);

  /*背景图*/
  #kite-captcha-bg-img {
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: var(--z-index);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    border-radius: calc(var(--scale) * 6px);
    background-color: $btn-color;
  }

  /*验证码主体*/
  #kite-captcha-box {
    height: calc(var(--scale) * 260px);
    width: 100%;
    position: relative;
    overflow: hidden;

    /*加载图*/
    #kite-captcha-loading {
      width: calc(var(--scale) * 50px);
      height: calc(var(--scale) * 50px);
      text-align: center;
      z-index: calc(var(--z-index) + 1);
      position: absolute;
      top: calc(var(--scale) * 120px);
      left: calc(var(--scale) * 126px);
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }

    #kite-captcha {
      text-align: left;
      margin: 0 auto;
      box-sizing: content-box;
      width: calc(var(--scale) * #{$kite-captcha-parent-width - 16}px);
      height: calc(var(--scale) * #{$kite-captcha-parent-height - 60}px);
    }
  }

  #kite-captcha-slider-move-track-mask {
    border: calc(var(--scale) * 1px) solid $move-track-mask-border-color;
    width: 0;
    height: calc(var(--scale) * 32px);
    background-color: $move-track-mask-bg-color;
    opacity: .5;
    position: absolute;
    top: calc(var(--scale) * -1px);
    left: calc(var(--scale) * -1px);
    border-radius: $border-radius;
  }

  /*验证码底部*/
  .kite-captcha-slider-footer {
    height: calc(var(--scale) * 50px);
    width: 100%;
    position: absolute;
    left:0;

    /*logo图*/
    .kite-captcha-logo {
      height: calc(var(--scale) * 30px);
      float: left;
      margin-top: calc(var(--scale) * 10px);
      margin-left: calc(var(--scale) * 10px);
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    .captcha-tool-button {
      float: right;
      width: 30%;
      height: 100%;
    }
    .kite-close-btn,
    .kite-refresh-btn,
    .kite-info-btn {
      width: calc(var(--scale) * 20px);
      height: calc(var(--scale) * 20px);
      float: right;
      margin-right: calc(var(--scale) * 10px);
      margin-top: calc(var(--scale) * 18px);
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .kite-close-btn {
      background-image: $close-btn-image;
    }

    .kite-refresh-btn {
      background-image: $refresh-btn-image;
    }

    .kite-info-btn {
      background-image: $info-btn-image;
    }
  }

  #kite-captcha {
    .kite-captcha-tips {
      height: calc(var(--scale) * 25px);
      width: 100%;
      position: absolute;
      bottom: calc(var(--scale) * -25px);
      left: 0;
      z-index: 999;
      font-size: calc(var(--scale) * 15px);
      line-height: calc(var(--scale) * 25px);
      color: #fff;
      text-align: center;
      transition: bottom .3s ease-in-out;

      &.tips-error {
        background-color: $error-color;
      }

      &.tips-success {
        background-color: $success-color;
      }

      &.tips-on {
        bottom: 0 !important;
      }
    }
  }
}

@keyframes myanimation {
  from {
    left: 0;
  }
  to {
    left: calc(var(--scale) * 289px);
  }
}

/** global css end **/

/** slider css start **/
#kite-captcha.kite-captcha-slider {
  z-index: calc(var(--z-index) + 2);
 // position: absolute;
 // left: 0;
 // top: 0;
  user-select: none;

  .kite-slider-tips {
    margin-bottom: calc(var(--scale) * 5px);
    font-weight: bold;
    font-size: calc(var(--scale) * 15px);
    line-height: normal;
    color: #000;
  }

  .kite-captcha-content {
    width: 100%;
    height: calc(var(--scale) * 180px);
    position: relative;
    overflow: hidden;

    .kite-captcha-bg-img-box {
      width: 100%;
      height: 100%;
      position: absolute;
      transform: translate(0px, 0px);

      img {
        height: 100%;
        border-radius: $border-radius;
      }
    }
  }

  #kite-captcha-slider-bg-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: $border-radius;
  }

  .kite-slider-move-img-box {
    height: 100%;
    position: absolute;
    transform: translate(0px, 0px);

    img#kite-captcha-slider-move-img {
      height: 100%;
    }
  }

  .kite-slider-move {
    height: calc(var(--scale) * 34px);
    width: 100%;
    margin: calc(var(--scale) * 11px) 0;
    position: relative;

    .kite-slider-move-track {
      position: relative;
      height: calc(var(--scale) * 32px);
      line-height: calc(var(--scale) * 32px);
      text-align: center;
      background: $track-color;
      color: #999;
      transition: 0s;
      font-size: calc(var(--scale) * 14px);
      box-sizing: content-box;
      border: calc(var(--scale) * 1px) solid $track-color;
      border-radius: calc(var(--scale) * 4px);

      .kite-slider-move-shadow {
        animation: myanimation 2s infinite;
        height: 100%;
        width: calc(var(--scale) * 5px);
        background-color: $btn-color;
        position: absolute;
        top: 0;
        left: 0;
        filter: opacity(0.5);
        box-shadow: calc(var(--scale) * 1px) calc(var(--scale) * 1px) calc(var(--scale) * 1px) $btn-color;
        border-radius: 50%;
      }
    }

    .kite-slider-move-btn {
      transform: translate(0px, 0px);
      position: absolute;
      top: calc(var(--scale) * -6px);
      left: 0;
      width: calc(var(--scale) * 63px);
      height: calc(var(--scale) * 45px);
      background-color: $btn-color;
      background-repeat: no-repeat;
      background-size: contain;
      border-radius: $border-radius;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

/** slider css end **/

/** rotate css start **/
#kite-captcha.kite-captcha-rotate {
  .kite-slider-move-img-box {
    height: 100%;
    text-align: center;
    position: initial;

    img#kite-captcha-slider-move-img {
      height: 100%;
      transform: rotate(0deg);
      display: inline-block;
    }
  }
}

/** rotate css end **/

/** concat css start **/
#kite-captcha.kite-captcha-concat {
  .kite-captcha-slider-concat-img {
    background-size: 100% calc(var(--scale) * 180px);
    position: absolute;
    transform: translate(0px, 0px);
    z-index: 1;
    width: 100%;
  }

  .kite-captcha-slider-concat-bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translate(0px, 0px);
    background-size: 100% calc(var(--scale) * 180px);
  }
}

/** concat css end **/

/** word_click css start **/
#kite-captcha.kite-captcha-work-click {
  position: relative;
  box-sizing: border-box;

  .kite-work-click-tips {
    position: relative;
    height: calc(var(--scale) * 40px);
    width: 100%;

    img {
      width: calc(var(--scale) * 130px);
      position: absolute;
      right: calc(var(--scale) * 15px);
    }

    span {
      font-size: calc(var(--scale) * 20px);
      display: inline-block;
      height: calc(var(--scale) * 40px);
      line-height: calc(var(--scale) * 40px);
      position: absolute;
    }
  }

  .kite-captcha-content {
    #kite-bg-img-click-mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;

      .click-span {
        position: absolute;
        left: 0;
        top: 0;
        background-color: $word-click-color;
        border-radius: calc(var(--scale) * 50px);
        width: calc(var(--scale) * 20px);
        height: calc(var(--scale) * 20px);
        line-height: calc(var(--scale) * 20px);
        text-align: center;
        color: #fff;
        border: calc(var(--scale) * 2px) solid #fff;
      }
    }
  }
}

/** word_click css end **/
